<template>
  <!-- 日程统计页面 -->
  <div class="statistics-view">
    <div v-for="item in dataList" :key="item.id">
      <span class="statistics-view-value">{{ item.value }}</span>
      <p class="statistics-view-label">
        <i
          :class="[item.iconUrl, 'iconfont']"
          :style="{ color: item.color }"
        ></i
        >
        <span>{{ item.label }}</span>
      </p>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs, computed } from 'vue';

import Platform from '@src/util/platform.ts';
import i18n from '@src/locales';
import { getThemeColor } from '@src/util/business/color'

// api
import { getStatisticalData } from '@src/api/ContractApi';

export default {
  setup() {
    const state = reactive({
      dataList: [
        {
          id: '1',
          label: i18n.t('contract.scheduleStatistics.state[1]'),
          value: 0,
          iconUrl: 'icon-file-text-fill',
          color: getThemeColor(),
          status: 'pendingCount'
        },
        {
          id: '2',
          label: i18n.t('contract.scheduleStatistics.state[2]'),
          value: 0,
          iconUrl: 'icon-detail-fill',
          color: '#FFA726',
          status: 'doingCount'
        },
        {
          id: '3',
          label: i18n.t('contract.scheduleStatistics.state[3]'),
          value: 0,
          iconUrl: 'icon-carryout-fill',
          color: '#52C41A',
          status: 'finishCount'
        },
      ],
    });

    // 合同id
    const contractId = computed(() => {
      return location.pathname.split('/contract/view/')[1] || '';
    });
    
    const initStatisticsData = () => {
      getStatisticalData({
        contractId: contractId.value
      }).then(res => {
        let { result = {}, success } = res || [];
        if (!success) return Platform.toast(res.message, 'error');
        
        state.dataList.forEach(item => {
          item.value = result[item.status] || 0
        })
      })
    }

    onMounted(() => {
      initStatisticsData()
    })
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped>
@import './Statistics.scss';
</style>